<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
    <el-form ref="form" :model="model" :rules="rules" label-width="110px" label-suffix=":">
          <el-form-item label="内容" prop="remark">
              <el-input v-model.trim="model.remark" type="textarea" :rows="6" placeholder="请填写您要备注的内容（最多200字符）" :maxlength="200" show-word-limit clearable style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="颜色" prop="remark_color">
              <div class="color-list">
                <div class="color-item" v-for="item in dict.colorList" :key="item" :style="{ backgroundColor: item, borderColor: item == model.remark_color ? '#000' : '#fff' }" @click="chooseColor(item)"></div>
              </div>
          </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialo2-footer">
       <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { warehouseAddRemark } from '@/api/warehouse'
export default {
  name: 'ShopRemarkDialog',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
      return {
        model: {
          remark_color: '',
          remark:'',
        },
        rules: {
          
        },
          dict: {
            colorList: ['#c03639', '#30b08f'],
          },
          save: false,
          loading: false
      }
  },
  computed: {
      title() {
        
          return `备注`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: { },
   mounted() { 
    
   },
  methods: {
    chooseColor(color) {
      this.model.remark_color = color
    },
      submit() {
         if(this.model.remark.length == 0) {
          return this.$message.error('请填写备注')
         }
         if(this.model.remark_color.length == 0) {
          return this.$message.error('请选择颜色')
         }
         if(this.model.remark_color == "#c03639"){
            this.model.remark_color = 1
         }
         if(this.model.remark_color == "#30b08f"){
            this.model.remark_color = 2
         }
         this.save = true
          const params = {...this.model, id: this.params.id}
          warehouseAddRemark(params).then(()=>{
            this.$message.success('操作成功')
            this.$emit('success',true)
            this.cancel()
          }).finally(()=>{
            this.save = false
          })
              
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style>
.color-list {
  display: flex;
  align-items: center;
  height: 36px;
}
.color-item {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
  border: 2px solid #fff;
}
</style>
